<template>
  <div>
    <el-card>
      <h2>车辆销售信息</h2>
      <div class="card-header">
        <div class="right" style="margin-top: 20px">
          <el-select style="width: 200px" class="m-r-20" clearable v-model="queryVo.date"
                     placeholder="请选择日期">
            <el-option v-for="item in dateList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select style="width: 200px" class="m-r-20" clearable v-model="queryVo.brandName"
                     placeholder="请选择品牌">
            <el-option v-for="item in brandNameList" :key="item" :label="item" :value="item"></el-option>
          </el-select>

          <el-input clearable v-model="queryVo.minPrice" placeholder="请输入最低价格"></el-input>
          <el-input clearable v-model="queryVo.maxPrice" placeholder="请输入最高价格"></el-input>

          <el-button type="primary" @click="getTableData" icon="el-icon-search">搜索</el-button>
          <el-button
              type="danger"
              icon="el-icon-download"
              @click="exportToExcel">导出
          </el-button>

        </div>
      </div>
      <el-table :data="dataList"
                border
                id="out-table"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                v-loading="loading"
                height="400" style="width: 100%">

        <el-table-column label="图片" width="200">
          <template v-slot="scope">
            <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.image"
                fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="subBrandName" label="子品牌">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌">
        </el-table-column>
        <el-table-column prop="seriesName" label="车系">
        </el-table-column>
        <el-table-column prop="count" label="销售数量">
        </el-table-column>
        <el-table-column prop="minPrice" label="最低价格">
        </el-table-column>
        <el-table-column prop="maxPrice" label="最高价格">
        </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scope">
            <el-link
                :href="`https://www.dongchedi.com/auto/series/${scope.row.seriesId}`"
                icon="el-icon-view el-icon--right"
                type="danger" target="_blank">查看详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="this.queryVo.pageNum" :page-sizes="[20, 30, 50, 100, 300]" background
                       :page-size="this.queryVo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import dataApi from "@/api/dataApi";

export default {
  name: "Table",
  data() {
    return {
      queryVo: {
        pageNum: 1,
        pageSize: 20,
        date: "",
        brandName: "",
        minPrice: "",
        maxPrice: "",
      },
      dateList: [],
      total: 0,
      loading: false,
      brandNameList: [],
      dataList: []

    }
  },
  created() {
    this.getDateList()
    this.getBrandNameList()
    this.getTableData()
  },
  methods: {
    getDateList() {
      dataApi.getDateList().then(resp => {
        this.dateList = resp.data;
      });
    },
    getBrandNameList() {
      dataApi.getBrandNameList().then(resp => {
        this.brandNameList = resp.data;
      });
    },
    getTableData() {
      this.loading = true
      setTimeout(() => {
        dataApi.getPageData(this.queryVo).then(resp => {
          if (resp.code === 200) {
            this.dataList = resp.data.records
            this.total = resp.data.total
            this.loading = false
            this.$message.success("搜索成功")
          } else {
            this.$message.error(resp.message)
          }
        })
      }, 1000)
    },
    exportToExcel() {

      let excelName = '销量数据.xlsx';

      var xlsxParam = {raw: true};

      let tables = document.getElementById("out-table").cloneNode(true);

      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }

      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
      var table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });

      try {
        this.$FileSaver.saveAs(
            new Blob([table_write], {type: "application/octet-stream"}),
            excelName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;
    },

    handleSizeChange(val) {
      this.queryVo.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.queryVo.pageNum = val
      this.getTableData()
    },
  }
}
</script>

<style lang="less" scoped>

</style>
